<template>
  <div>
    <div style="display:flex;flex-direction:row;margin-bottom: 10px;">
      <Button style="margin-bottom: 10px" type="primary" @click="syncusers">用户同步</Button>
      <Input  style="margin-bottom: 10px" v-model="keyword" @on-search="searchData" @on-clear="clearInput" search enter-button placeholder="用户名搜索" clearable class="input-container" />
    </div>
    <Table   highlight-row border :columns="columns" :data="data" size="small" ref="table"  @on-row-click="onCurrentChange"></Table>

    <div>
      <Page style="margin-top: 10px;text-align: center"  @on-change="handlePageChange"  :current="currentPage" :total="total" show-total />
    </div>
  </div>

</template>
<script>
import axios from "axios";


export default {
  name:'UserList',
  data () {
    return {
      data: [],
      id: null,
      currentPage: 1, // 当前页码
      total:0,
      keyword:'',
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '用户名',
          align: 'center',
          key: 'uname',
          render: (h, params) => {
            // 返回一个可点击的链接
            return h('a', {
              on: {
                click: () => {
                  let url = '/dashboard/users/details?tab=name1'
                  this.$router.push(url);
                }
              }
            }, params.row.uname); // 显示平台名称
          }
        },
        {
          title: '来源',
          align: 'center',
          key:  'resource',
        },
        {
          title: '有效',
          align: 'center',
          key: 'valid',
          render: (h) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'md-checkmark',
                  size: '18',
                  color: '#2d8cf0'
                },
              }),
            ]);
          },
        },
        {
          title: '角色',
          align: 'center',
          key:    'role'
        },
        // {
        //   title: '操作',
        //   key: 'more',
        //   align: 'center',
          // render: (h, params) => {
          //   return h('div', {
          //     style: {
          //       display: 'flex',
          //       justifyContent: 'center'
          //     }
          //   }, [
          //     h('Button', {
          //       props: {
          //         type: 'error'
          //       },
          //       style: {
          //         marginRight: '10px'
          //       },
          //       on: {
          //         click: () => this.deleteItem(params.row) // 这里传递当前行数据给删除方法
          //       }
          //     }, '删除'),
          //   ]);
          // }
        // }
      ]
    }
  },
  mounted() {
    this.getUsersData();     // 在组件加载时获取数据
  },
  methods: {
    syncusers(){
      this.syncuser()
    },
    onCurrentChange(currentRow){
      this.id = currentRow.ID
    },
    handlePageChange(currentPage){
      // 当页码变化时，更新currentPage并重新获取表格数据
      this.currentPage = currentPage;
      this.getUsersData();
    },
    clearInput() {
      this.keyword = ''; // 清空关键字
      this.getUsersData(); // 重新获取数据
    },
    searchData() {
      this.currentPage = 1
      this.getUsersData();

    },
    syncuser(){
      axios.get(`http://172.30.53.223:8888/api/users/sync`)
          .then(() => {
            alert("同步数据成功");

          })
          .catch(() => {
            alert("同步数据失败");
          });
    },
    getUsersData() {
      axios.get(`http://172.30.53.223:8888/api/users?keyword=${this.keyword}&page=${this.currentPage}`)
          .then(response => {
            if (response.data.userlist === null) {
              this.data = [];
            } else {
              this.data = response.data.userlist.map(userlist => ({
                uname: userlist.UserName,
                resource: userlist.Resource,
                valid:  userlist.Valid,
                role: userlist.Role,
              }));
            }
            this.total = response.data.total;
          })
          .catch(error => {
            console.error("获取数据出错:", error);
          });
    },

  },
}
</script>
